<template>
  <div id="box">
    <NavBar :title="title" />
    <header>
      <h2>请描述你的问题<span>如何描述?</span></h2>
      <van-icon class="tip" name="youzan-shield">
        蘑菇宠医为你保障隐私，内容仅医生可见</van-icon
      >
      <textarea
        class="userContent"
        placeholder="请详细描述宝贝的情况，这将为医生作出正确判断并提供有效建议起到非常大的作用"
      ></textarea>
      <h3>
        <van-button
          v-for="item in btnArr"
          :key="item"
          icon="plus"
          size="samll"
          type="default"
          style="
            background-color: #fafafa;
            border: none;
            font-size: 12px;
            padding: 0 7px;
          "
          >{{ item }}</van-button
        >
      </h3>
      <div>
        <van-uploader
          v-model="fileList"
          upload-text="上传图片"
          preview-cover="上传内容仅对医生可见"
          multiple
        ></van-uploader>
        <span v-if="!fileList.length">上传内容仅对医生可见</span>
      </div>
    </header>
    <footer>
      <h2>根据你的问题描述，<span>智能匹配医生</span></h2>
      <p>{{ tip }}</p>
      <h2>
        <van-button class="btn" type="default">下一步</van-button>
      </h2>
    </footer>
  </div>
</template>
<script setup>
defineProps(["title", "tip"]);
import { ref } from "vue";
import NavBar from "../NavBar.vue";

let btnArr = ref(["症状描述", "患病时长", "医院检查", "用药情况"]);
// const afterRead = (file) => {
//   // 此时可以自行将文件上传至服务器
//   console.log(file);
// };
let fileList = ref([]);
</script>
<style scoped>
#box {
  padding: 0 30px;
}
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}
header h2 {
  width: 100%;
  display: flex;
  align-items: center;
}
header h2 span {
  color: #1ec7af;
  font-size: 26px;
  margin-left: 20px;
  font-weight: normal;
}
.tip {
  width: 100%;
  color: #999;
  font-size: 24px;
  margin: 20px 0 40px 0;
}
.userContent {
  width: 100%;
  height: 270px;
  background-color: #fafafa;
  padding: 40px;
  box-sizing: border-box;
  border: none;
  border-radius: 20px;
  font-size: 35px;
}
header h3 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
}
header div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
header div span {
  position: absolute;
  top: 32%;
  left: 190px;
  color: #c3c4ca;
  font-size: 30px;
}
footer {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: fixed;
  bottom: 120px;
  left: 0;
}
footer h2:nth-of-type(1) span {
  color: #1ec7af;
}
footer p {
  color: #999;
  margin: 10px 0 30px 0;
}
footer h2:nth-of-type(2) {
  width: 100%;
}
.btn {
  width: 100%;
  height: 100px;
  border: none;
  border-radius: 50px;
  background-color: #cccccc;
  font-size: 35px;
  color: #fafafa;
}
</style>